<template>
  <div class="c-minh c-p c-bg-sgray" v-if="userDetail">
    <div class="c-w100 theme-bg-gradient c-hh190 c-ph20 c-pt30 c-flex-row">
      <img :src="$addXossFilter(userDetail.headimgurl, require('@/assets/defult_head.png'))" alt="" class="c-ww80 c-hh80 c-brp50">
      <div class="c-fc-white c-pl20 c-w0 c-flex-grow1">
        <div class="c-flex-row c-aligni-center">
          <div class="c-fs30 c-fw-b c-text-ellipsis1 c-pr10 maxw240">{{userDetail.nickname}}</div>
          <!-- //非股东 -->
          <div class="c-flex-row c-aligni-center c-p" v-if="userDetail.type==0">
            <img src="../../../../public/i/wap/memberIndex/normalVip.png" alt="" class="c-ww36 c-hh36 imgCloseBig c-p c-block c-pz6">
            <div class="c-bg-f2 c-text-ellipsis1 c-fc-sblack c-pr10 c-pl32 c-p-l10 c-textAlign-c c-lh-n c-br16 c-maxw242 c-fs18 c-pv2 c-flex-row c-aligni-center c-pa">非股东</div>
          </div>
          <!-- //股东 -->
          <div class="c-flex-row c-aligni-center c-p" v-else>
            <img src="../../../../public/i/wap/memberIndex/mbAgent.png" alt="" class="c-ww50 imgCloseBig c-p c-inlineblack c-vcAlign-middle c-pz6">
            <div class="c-mbIndexBg1 c-maxw242 c-fs18 c-fc-white c-text-ellipsis1 c-pr10 c-pl48 c-p-l10 c-lh-n c-pl10 c-textAlign-c c-br16 c-pv2 c-flex-row c-aligni-center c-pa">
              {{userDetail.sName}}</div>
          </div>
        </div>
        <div class="c-flex-row c-justify-sb c-fs20">
          <div class="c-pt10 c-w48">
            <div class="c-ws-n c-text-ellipsis1">真名:{{userDetail.realName ? userDetail.realName : "--"}}</div>
            <div class="c-pt16">ID:{{userDetail.userId ? userDetail.userId : "--"}}</div>
          </div>
          <div class="c-pt10 c-w48 c-fs20">
            <div class="c-ws-n c-text-ellipsis1">TEL:{{userDetail.mobile ? userDetail.mobile : "--"}}</div>
            <div class="c-pt16" @click="clickMore">全部信息<span class="iconfont c-pl8 c-fs20">&#xe836;</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-ph24 c-mt20">
      <div class="c-bg-white c-br10 c-ph20 c-pv20">
        <div class="c-flex-row c-justify-sb c-aligni-center c-pb20 c-bd-b1">
          <span class="c-fs26 c-fw-b">备注信息</span>
          <span class="theme-fc c-fs20" @click="showInfo=true;">编辑</span>
        </div>
        <div class="c-mt20 c-fs20 c-fc-gray">
          {{userDetail.remark}}
        </div>
      </div>
      <!--需求暂时搁浅，下期做-->
      <!-- <div class="c-bg-white c-mt20 c-br10 c-ph20 c-pt20 c-pb28">
        <div class="c-flex-row c-justify-sb c-aligni-center c-pb20 c-bd-b1">
          <span class="c-fs26 c-fw-b">数据统计</span>
          <span class="c-fs20" @click="clickTimeModel()">{{timeMap[timeValue]}}<span class="icon iconfont c-fs10 c-ml10">&#xe6a9;</span></span>
        </div>
        <div class="c-flex-row c-justify-sb c-flexw-wrap c-w100">
          <div class="c-flex-column c-aligni-center c-mt20 c-w33">
            <span class="c-fs24 c-fw-b">1923.92</span>
            <span class="c-fs20 c-fc-gray c-mt8">消费总额(元)</span>
          </div>
          <div class="c-flex-column c-aligni-center c-mt20 c-w33">
            <span class="c-fs24 c-fw-b">192</span>
            <span class="c-fs20 c-fc-gray c-mt8">消费次数</span>
          </div>
          <div class="c-flex-column c-aligni-center c-mt20 c-w33">
            <span class="c-fs24 c-fw-b">1923.92</span>
            <span class="c-fs20 c-fc-gray c-mt8">访问次数</span>
          </div>
          <div class="c-flex-column c-aligni-center c-mt20 c-w33">
            <span class="c-fs24 c-fw-b">14</span>
            <span class="c-fs20 c-fc-gray c-mt8">分享次数</span>
          </div>
        </div>
      </div> -->
      <div class="c-mt20">
        <div class="c-fw-b c-fs26">消费明细</div>
        <div class="c-bg-white c-mt20 c-br10 c-pv20 c-ph20" v-for="(item, index) in list" :key="index">
          <div class="c-bd-b1 c-pb20 c-flex-row">
            <img :src="$addXossFilter(item.prodType == 183 ? require('@/assets/i/wap/newAreaAgent/shareholder.png') : item.cover, require('@/assets/defult270.png'))" alt="" class="c-ww180 c-hh120 c-br10"/>
            <div class="c-flex-column c-justify-sb c-flex-grow1 c-w0 c-ml20">
              <div class="c-text-ellipsis1 c-fs24 c-fw-b">{{item.name}}</div>
              <div class="c-flex-row c-justify-sb c-fs20 c-fc-gray">
                <span><span class="">价格：{{'￥' | iosPriceFilter}}{{item.price}}</span><span class="theme-fc c-ml10">实付：{{'￥' | iosPriceFilter}}{{(Number(item.payMoney)-Number(item.refundMoney)) | formatNumberOther}}</span></span>
              </div>
            </div>
          </div>
          <div class="c-mt20 c-flex-row c-justify-sb c-fs20 c-fc-gray" v-if="item.saleType != 0 && item.prodType != 183">
            <span>{{item.saleType == 1 ? "共" + item.periodNum + '课时,' : ''}}{{item.saleType != 1 && item.specName ? item.specName + "，" : ''}}{{item.saleType == 1 && item.leftPeriod >= 0 ? '剩余课时：'+ item.leftPeriod : ''}}</span>
            <span>{{item.saleType == 1 ? "有效期" : (item.saleType == 3 ? "结班时间" : "课程结束时间")}}：{{item.expireAt.split(" ")[0]}}</span>
          </div>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无明细"></loading-status-tem>
    </div>

    <open-modal :openModal="openModal" @closeModal="closeModal">
      <div class="c-ph24 c-bg-white c-pz1000 c-br-tr10 c-br-tl10 c-pb40 c-fc-xblack c-fs22">
        <div class="c-fs28 c-fw-b c-textAlign-c c-pt30 c-fc-xblack c-p">
          全部信息
          <span class="iconfont c-fs18 c-fc-gray c-pa c-p-t40 c-p-r8" @click="closeModal">&#xe8fd;</span>
        </div>
        <div class="c-pv24 c-bd-b1"><span class="c-ww180 c-pr40 c-inlineblack c-fc-gray">姓名</span>{{userDetail.nickname}}</div>
        <div class="c-pv24 c-bd-b1"><span class="c-ww180 c-pr40 c-inlineblack c-fc-gray">真名</span>{{userDetail.realName ? userDetail.realName : "--"}}</div>
        <div class="c-pv24 c-bd-b1"><span class="c-ww180 c-pr40 c-inlineblack c-fc-gray">身份</span>{{custNameMap[`${userDetail.vipType}`]}}</div>
        <div class="c-pv24 c-bd-b1"><span class="c-ww180 c-pr40 c-inlineblack c-fc-gray">ID</span>{{userId || "--"}}</div>
        <div class="c-pv24 c-bd-b1"><span class="c-ww180 c-pr40 c-inlineblack c-fc-gray">TEL</span>{{userDetail.mobile ? userDetail.mobile : "--"}}</div>
        <div class="c-pv24 c-bd-b1"><span class="c-ww180 c-pr40 c-inlineblack c-fc-gray">注册来源</span>{{fromChannel[userDetail.fromChannel]}}</div>
        <div class="c-pv24 c-bd-b1"><span class="c-ww180 c-pr40 c-inlineblack c-fc-gray">最近活跃</span>{{userDetail.activeTime}}</div>
        <div class="c-pv24 c-bd-b1"><span class="c-ww180 c-pr40 c-inlineblack c-fc-gray">绑定时间</span>{{userDetail.bindAt}}</div>
      </div>
    </open-modal>

    <open-modal :openModal="timeModal" @closeModal="closeTimeModal">
      <div class="c-ph24 c-bg-white c-pz1000 c-br-tr10 c-br-tl10 c-pb40 c-fc-xblack c-fs22">
        <div class="c-fs28 c-fw-b c-textAlign-c c-pt30 c-fc-xblack c-p">
          选择时间
          <span class="iconfont c-fs18 c-fc-gray c-pa c-p-t40 c-p-r8" @click="closeTimeModal">&#xe8fd;</span>
        </div>
        <div class="c-pv24 c-bd-b1 c-flex-row c-justify-sb c-aligni-center" v-for="(item, index) in timeMap" :key="index" @click="timeType(index)">
          <span>{{timeMap[index]}}</span>
          <span class="icon iconfont c-fs28" :class="index == timeValue ? 'theme-fc' : 'c-fc-gray'">{{index == timeValue ? '&#xe6f6;' : '&#xe6f7;'}}</span>
        </div>
      </div>
    </open-modal>

    <div v-if="showInfo">
      <div @click="showInfo = false;" class="c-pf c-p-r0 c-p-l0 c-p-t0 c-p-b0 c-translucent-balck60 c-pz1000"></div>
      <div class="c-pf c-bg-white c-p-b0 c-w100 c-maxw640 c-pz6 c-pv20 c-box-shadow7 c-pz1002 c-br-tl16 c-br-tr16">
        <div class="c-fs24 c-fw400 c-ph20 c-fc-gray c-text-ellipsis1">编辑备注信息</div>
        <div class="c-bg-white c-mt12 c-ph20 c-pb24 c-bd-b1-f5">
          <textarea autofocus="autofocus" v-model="infotext" maxlength="100" rows="3" class="c-bg-white c-bd0 c-w100" placeholder="不超过100字"></textarea>
        </div>
        <div class="c-flex-row c-aligni-center c-justify-end c-pt24 c-ph20">
          <div class="c-fs22 c-fc-sgray">({{infotext.length}}/100)</div>
          <div @click="onConfirm" class="c-fs22 c-fc-white c-hh48 c-lh50 c-ww120 c-textAlign-c theme-bg c-br36 c-ml20">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import openModal from "@/components/templates/common/openModal.vue";
import { utilJs } from "@/utils/common.js";
let pageIndex = 0;
let loading = false;
const LIMIT = 10;
export default {
  name: 'ShCustomDetail',
  components: {
    openModal,
    loadingStatusTem
  },
  props: [],
  beforeCreate() {},
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      custNameMap: [],
      openModal: false, //展示全部信息
      timeModal: false, //展示时间
      showInfo: false, //展示备注信息
      infotext: '', //备注信息
      timeValue: 0,
      timeMap: {
        0: '7天',
        1: '30天',
        2: '一年'
      },
      userId: '',
      virtualId: '',
      userDetail: null,
      fromChannel: {
        '-1': '未知',
        1: '公众号',
        2: '微信小程序',
        3: '安卓APP',
        4: '苹果APP',
        5: 'pc网校',
        10: '抖音小程序'
      }, //用户来源
      dataStatus: 'HAS_MORE_DATA',
      list: [],
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    onConfirm() {
      utilJs.postMethod(global.apiurl + 'shareholder/setRemark', {remark: this.infotext, id: this.userDetail.id}, (res) => {
        this.$set(this.userDetail, "remark", this.infotext);
        this.showInfo = false;
      });
    },
    timeType(key) {
      this.timeValue = key;
      this.closeTimeModal();
    },
    clickMore() {
      this.openModal = true;
    },
    closeModal() {
      this.openModal = false;
    },
    clickTimeModel() {
      this.timeModal = true;
    },
    closeTimeModal() {
      this.timeModal = false;
    },
    getUserDetail() {
      utilJs.getMethod(global.apiurl + 'shareholder/shareholderCustomerDetail?userId=' + this.userId + "&virtualId=" + this.virtualId, (res) => {
        this.userDetail = res;
        if (res.remark) {
          this.infotext = res.remark;
        }
      });
    },
    getInfoList() {
      if (loading == true) {
        return;
      }
      loading = true;
      utilJs.getMethod(global.apiurl + 'shareholder/userConsumeDetail?userId=' + this.userId + "&virtualId=" + this.virtualId + "&page=" + pageIndex + '&limit=' + LIMIT, (res) => {
        if (pageIndex == 1) {
          this.list = res.data;
        } else {
          this.list = [...this.list, ...res.data];
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
        loading = false;
      },
      () => {
        this.dataStatus = 'DATA_ERROR';
        loading = false;
      });
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.list.length > 0 && loading == false) {
          this.getInfoList();
        }
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/agent/agentIndex?fromType=shareholder&refereeId=" +
        localStorage.getItem("userId");
      if (localStorage.getItem("shareholderId")) {
        shareUrl += "&shareholderId=" + localStorage.getItem("shareholderId");
      }
      let title = "股东中心";
      let shareDesc = "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, "", shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/agent/agentIndex?fromType=shareholder&refereeId=" +
        localStorage.getItem("userId");
      if (localStorage.getItem("shareholderId")) {
        shareUrl += "&shareholderId=" + localStorage.getItem("shareholderId");
      }
      let title = "股东中心";
      let shareDesc = "点击查看详情";
      utilJs.appShareTrue(title, "", shareUrl, shareDesc);
    },
  },
  activated() {
    setDocumentTitle("客户详情");// eslint-disable-line
    this.userId = this.$route.query.userId || '';
    this.virtualId = this.$route.query.virtualId || '';
    this.userDetail = null;
    this.openModal = false;
    this.timeModal = false;
    this.timeValue = 0;
    this.showInfo = false;
    this.infotext = '';
    this.custNameMap = utilJs.getCustNameMap();
    pageIndex = 1;
    this.dataStatus = 'HAS_MORE_DATA';
    this.list = [];
    if (this.userId || this.virtualId) {
      this.getUserDetail();
      this.getInfoList();
      this.$nextTick(() => {
        window.addEventListener('scroll', this.windowScrollFunction);
      });
    }
    this.wechatShare();
  },
  deactivated() {
    if (this.userId) {
      window.removeEventListener('scroll', this.windowScrollFunction);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.maxw240 {
  max-width: 6rem;
}
</style>
